<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
		
		<script type="text/javascript">
		      // 基于准备好的dom，初始化echarts实例
		      var myChart = echarts.init(document.getElementById('main'));
		
		      // 指定图表的配置项和数据
		      var option = {
				  backgroundColor: '#2c343c',
				  title: {
					text: 'Customized Pie',
					left: 'center',
					top: 20,
					textStyle: {
					  color: '#ccc'
					}
				  },
				  tooltip: {
					trigger: 'item'
				  },
				  visualMap: {
					show: false,
					min: 80,
					max: 600,
					inRange: {
					  colorLightness: [0, 1]
					}
				  },
				  series: [
					{
					  name: 'Access From',
					  type: 'pie',
					  radius: '55%',
					  center: ['50%', '50%'],
					  data: [
						{ value: 335, name: 'Direct' },
						{ value: 520, name: 'Email' },
						{ value: 274, name: 'Union Ads' },
						{ value: 458, name: 'Video Ads' },
						{ value: 400, name: 'Search Engine' }
					  ].sort(function (a, b) {
						return a.value - b.value;
					  }),
					  roseType: 'radius',
					  label: {
						color: 'rgba(255, 255, 255, 0.3)'
					  },
					  labelLine: {
						lineStyle: {
						  color: 'rgba(255, 255, 255, 0.3)'
						},
						smooth: 0.2,
						length: 10,
						length2: 20
					  },
					  itemStyle: {
						color: '#c23531',
						shadowBlur: 200,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					  },
					  animationType: 'scale',
					  animationEasing: 'elasticOut',
					  animationDelay: function (idx) {
						return Math.random() * 200;
					  }
					}
				  ]
				};
		
		
		      // 使用刚指定的配置项和数据显示图表。
		      myChart.setOption(option);
		    </script>
	</body>
</html>
